<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="jxz">
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
         <link rel="shortcut icon" href="image/mi.png" type="image/png">
         <link rel="icon" href="image/mi.png" type="image/png">
        <style>
    body{
        background-color: #eee;
    }
     /*头部*/
     header{
         display: flex;
         justify-content: space-between;
         font-size: 3vw;
         color: gray;
     }
       header a{
           text-decoration: none;
           color: gray;
       }
       /*中心*/ 
       section{
           width: 100%;
           height: 50vw;
           background-color: white;
       }
       section h2{
           text-align: center;
           font-size: 4vw;
       }
       section a{
           vertical-align: baseline;
           text-decoration: none;
           color: black;
       }
       section a img{
           width: 10vw;
       }
       section p{
           position: relative;
           left: 1vw;
           font-size: 2vw;

       }
       .five{
           position: relative;
           left: 2.5vw;
       }
       .phone{
           display: flex;
           justify-content: space-around;
          
       }
       .eat{
           position: relative;
           left:-4vw;
       }

              /*页脚*/
    footer{
        height:100px;
        width: 100%;
        background-color: white;
        position: fixed;
        bottom: 0;
        border-top: 1px solid gray;
    }
      nav{
            display: flex;
            line-height: 35px;
            margin-bottom: 0;
            justify-content: space-around;
        }
        nav a{
            font-size: 3rem;
            font-weight: normal;
            color: gray;
            display: block;    
        }
        .picture{
            display: inline-block;
            width: 60px;
            height: 60px;
            background-image: url(image/spr1.png);

        }
        .r1c7{
          background-position: 0 -360px;
        }
        .r1c1{
            background-position: 0 0;
        }
        .r1c3{
            background-position: 0 -120px;
        }
        .r1c4{
            background-position: 0-240px;
        }
     
        </style>
    </head>
    <body>
        <!--头部-->
        <header>
            <a href="#"> <span class="glyphicon glyphicon-chevron-left"></span></a>
            <span>商品分类</span>
            <a href="#"><span class="glyphicon glyphicon-search"></span></a>
        </header>
        <!--中心-->
        <section>
            <h2>手机/电话卡</h2>
            <div class="phone">
            <a href="#">
                  <img src="image/c.png" alt="">
                 <p>小米Max</p>
            </a>
              
            <a href="#">
                <img src="image/b.png" alt="">
                 <p class="five">小米5</p>
            </a>
              
           <a href="#">
                <img src="image/d.png" alt="">
                 <p>红米Pro</p>
           </a>
          <a href="#">
               <img src="image/a.png" alt="">
                 <p>红米Note3</p>
          </a>
             </div>
             <div class="phone">
               
              <a href="#">
                <img src="image/m.png" alt="">
                 <p>红米Note4</p>
              </a>
            
             <a href="#">
                <img src="image/n.png" alt="">
                 <p class="five">红米3</p>
             </a>
            <a href="#">
                 <img src="image/j.png" alt="">
                 <p>红米3S</p>
            </a>
            <a href="#">
                <img src="image/k.png" alt="">
                 <p>红米3X</p>
            </a>
            </div>
              <div class="phone">
              <a href="#">
                   <img src="image/h.png" alt="">
                 <p>官翻机</p>
              </a>
             <a class="eat" href="#">
                  <img src="image/x.png" alt="">
                 <p>任我行</p>
             </a>
           <a class="eat" href="#">
                 <img src="image/f.png" alt="">
                 <p>吃到饱</p>
           </a>
             <div>
                <img src="image/.png" alt="">
                 <p></p>
            </div>
              </div>
        </section>
        <!--第二部分内容-->
        <section>
            <h2>笔记本/平板</h2>
              <div class="phone">
            <a href="#">
                  <img src="image/b1.png" alt="">
                 <p>笔记本12.5"</p>
            </a>
              
            <a href="#">
                <img src="image/b2.png" alt="">
                 <p class="five">笔记本13.3"</p>
            </a>
              
           <a href="#">
                <img src="image/p1.png" alt="">
                 <p>平板2</p>
           </a>
          <a href="#">
               <img src="image/p1.png" alt="">
                 <p>平板Windows版</p>
          </a>
             </div>
        </section>
         <!--页脚-->
      <footer>
         <nav>
        <a href="小米商城首页.html">
        <div class="picture r1c7"></div>
        <p>商城</p>
        </a>
        <a href="商城分类.html">
         <div class="picture r1c1"></div>
        <p>分类</p> 
        </a>
        <a href="小米购物车.html">
         <div class="picture r1c3"></div>
        <p>购物车</p>
        </a>
        <a href="个人中心.html">
        <div class="picture r1c4"></div>
        <p>服务</p>
        </a>
    </nav>
    </footer>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>